import React, { Component } from 'react';
import swiper from 'swiper/swiper-bundle'
import 'swiper/swiper-bundle.css'
import './Swiper.style.scss'

class Swiper extends Component {
    render() {
        return (
            <div className="swiperContainer">
                <div className="swiper-wrapper">
                    {/* {
                        this.props.list && this.props.list.product_list.map((item, index) => {
                            return (<div className="swiper-slide">
                                <img src={item.img} alt="" />
                            </div>)
                        })
                    } */}
                    <div className="swiper-slide">
                        <img src={this.props.list && this.props.list.product_list[0].img} alt="" />
                        <p>{this.props.list && this.props.list.product_list[0].title}</p>
                        <span>￥{this.props.list && this.props.list.product_list[0].price}</span>
                    </div>
                    <div className="swiper-slide">
                        <img src={this.props.list && this.props.list.product_list[1].img} alt="" />
                        <p>{this.props.list && this.props.list.product_list[1].title}</p>
                        <span>￥{this.props.list && this.props.list.product_list[1].price}</span>
                    </div>
                    <div className="swiper-slide">
                        <img src={this.props.list && this.props.list.product_list[2].img} alt="" />
                        <p>{this.props.list && this.props.list.product_list[2].title}</p>
                        <span>￥{this.props.list && this.props.list.product_list[2].price}</span>
                    </div>
                    <div className="swiper-slide">
                        <img src={this.props.list && this.props.list.product_list[3].img} alt="" />
                        <p>{this.props.list && this.props.list.product_list[3].title}</p>
                        <span>￥{this.props.list && this.props.list.product_list[3].price}</span>
                    </div>
                    <div className="swiper-slide">
                        <img src={this.props.list && this.props.list.product_list[4].img} alt="" />
                        <p>{this.props.list && this.props.list.product_list[4].title}</p>
                        <span>￥{this.props.list && this.props.list.product_list[4].price}</span>
                    </div>
                    <div className="swiper-slide">
                        <img src="https://oss.flowerplus.cn/oss_jpg/2019-10-30/15724021943644.jpg!750" alt=""/>
                    </div>
                    {/* <div style={{background:"red"}} className="swiper-slide">1</div>
                    <div style={{background:"blue"}} className="swiper-slide">2</div>
                    <div style={{background:"green"}} className="swiper-slide">3</div>
                    <div style={{background:"green"}} className="swiper-slide">3</div>
                    <div style={{background:"green"}} className="swiper-slide">3</div>
                    <div style={{background:"green"}} className="swiper-slide">3</div> */}
                </div>
                <div className="swiper-pagination"></div>
            </div>
        );
    }
    componentDidMount() {
        new swiper('.swiperContainer', {
            slidesPerView: 3,

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            }
        });
    }
}

export default Swiper;